<template>
  <div class="div" ref="div">

  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import {onMounted,ref,reactive} from 'vue'
import {getsite} from '../../request/index'
var colorArr=[
    {
        top:'#3531ff',
        bottom:'#b402fe'
    },
     {
        top:'#3531ff',
        bottom:'#b402fe'
    }
];


const option=reactive({
    grid:null,
    xAxis:null,
    yAxis:null,
    series: [
        {
        type: 'bar',
        data:null,
        barWidth: '20px',
        itemStyle: {
            normal: {
                color: function(params) {
                    let num = colorArr.length;
                    return new echarts.graphic.LinearGradient(0, 0, 0, 1,[{
                        offset: 0,
                        color: colorArr[params.dataIndex % num].top // 0% 处的颜色
                    },{//可根据具体情况决定哪根柱子显示哪种颜色
                        offset: 1,
                        color: colorArr[params.dataIndex % num].bottom // 100% 处的颜色
                    }],false)
                },
                barBorderRadius: [30, 30, 0, 0],
            }
        },
        label: {
            normal: {
                show: true,
                fontSize: 18,
                fontWeight: 'bold',
                color: '#333',
                position: 'top',
            }
        }
    }]

})

const div=ref()
let myChart
onMounted(()=>{
    getsite().then(res=>{
        console.log('场地使用数据',res.data.data);
       myChart=echarts.init(div.value)
        option.grid=res.data.data.grid
        option.xAxis=res.data.data.xAxis
        option.yAxis=res.data.data.yAxis
        option.series[0].data=res.data.data.series[0].data
    myChart.setOption(option) 
    })
    
})

window.addEventListener('resize',function(){
    myChart.resize();
})


</script>
<style scoped>
.div{
    width: 95%;
    height: 80%;
   
}
</style>